﻿/// <reference path = "Base.ts" />
namespace VantCellTypes {

    interface tabItem {
        value: any;
        title: string;
        valueStr: string;
        dot: boolean;
        badge: any;
    }

    interface TabsCellTypeParam {
        ClickCommand: Forguncy.Plugin.ICustomCommandObject;
        type: "line" | "card";
        background: string;
        color: string;
        titleActiveColor: string;
        titleInactiveColor: string;
        lineWidth: number;
        lineHeight: number;
        offsetTop: number;
        ellipsis: boolean;
        shrink: boolean;
        tabs: tabItem[];
        useBinding: boolean;
        bindingOptions: any;
    }

    export class TabsCellType extends VantCellTypeBase<TabsCellTypeParam> {
        public onPageLoaded(info: Forguncy.Plugin.CellTypeInfo) {
            const self = this;
            const cellType = this.cellType;

            let tabs = [];
            if (!cellType.useBinding && cellType.tabs) {
                cellType.tabs.every(i => i.valueStr = i.value?.toString());
                tabs = cellType.tabs;
            }

            const option = {
                template: `
<van-tabs
    ref="van-tabs"
    v-model:active="active"
    :type="type"
    :color="color"
    :duration="duration"
    :background="background"
    :titleActiveColor="titleActiveColor"
    :titleInactiveColor="titleInactiveColor"
    :lineWidth="lineWidth"
    :lineHeight="lineHeight"
    :ellipsis="ellipsis"
    :shrink="shrink"
    @click-tab="tabClick">
    <van-tab
        v-for="(tab, index) in tabs"
        :key="index"
        :name="tab.valueStr"
        :title="tab.title"
        :dot="showAsDot(tab)"
        :badge="tab.badge">
    </van-tab>
</van-tabs>
`,
                data() {
                    return {
                        ...self.getDefaultData(),
                        ...cellType,
                        ...self.convertToCssColor(cellType),
                        tabs: tabs,
                        active: null,
                        duration: 0.3,
                        ellipsis: !!cellType.ellipsis
                    };
                },
                methods: {
                    tabClick(tab) {
                        const index = this.tabs.map(i => i.valueStr).indexOf(tab.name);
                        if (cellType.ClickCommand?.Commands?.length) {
                            const initValue = {};
                            initValue[cellType.ClickCommand.ParamProperties["itemIndex"]] = index + 1;
                            initValue[cellType.ClickCommand.ParamProperties["itemValue"]] = this.tabs[index].value;
                            initValue[cellType.ClickCommand.ParamProperties["itemText"]] = tab.title;
                            self.executeCustomCommandObject(cellType.ClickCommand, initValue);
                        }
                        this.value = this.tabs[index].value;
                        self.commitValue();
                    },
                    setValue(value: any) {
                        this.value = value;
                        try {
                            this.duration = 0;
                            this.active = value?.toString();
                        }
                        finally {
                            Vue.nextTick(() => {
                                this.duration = 0.3;
                            });
                        }
                    },
                    getValue() {
                        return this.value;
                    },
                    showAsDot(tab) {
                        return self.isEmpty(tab.badge) ? false : !!tab.dot;
                    }
                },
                created() {
                    this.tabs = self.getTabs(cellType);
                },
                mounted() {
                    self.fontSelector = ".van-tab__text";
                    self.updateColorVar("--van-tabs-bottom-bar-color", cellType.color);
                }
            };

            this.createVueApp(option);

            this.onDependenceCellValueChanged(() => {
                this.vue.tabs = this.getTabs(cellType);
            });
            if (cellType.useBinding) {
                SupportDataSourceCellType.refreshData(this, cellType.bindingOptions, dataSource => {
                    if (dataSource) {
                        dataSource.every(i => i.valueStr = i.value?.toString());
                    }
                    this.vue.tabs = dataSource ?? [];
                });
            }
            super.onPageLoaded(info);
        }

        private getDefaultData() {
            return {
                tabs: [],
                shrink: false,
                ellipsis: true
            };
        }

        private getTabs(cellType: TabsCellTypeParam) {
            return cellType.tabs?.map(tab => {
                return <tabItem>{
                    title: tab.title,
                    dot: !!tab.dot,
                    value: tab.value,
                    valueStr: tab.valueStr,
                    badge: this.evaluateFormula(tab.badge)
                };
            });
        }

        private convertToCssColor(cellType: TabsCellTypeParam): any {
            const result: any = {};
            result.color = Forguncy.ConvertToCssColor(cellType.color);
            result.background = Forguncy.ConvertToCssColor(cellType.background);
            result.titleActiveColor = Forguncy.ConvertToCssColor(cellType.titleActiveColor);
            result.titleInactiveColor = Forguncy.ConvertToCssColor(cellType.titleInactiveColor);
            return result;
        }

        onWindowResized() {
            this.vue?.$refs["van-tabs"]?.resize();
        }

        // RunTimeMethod
        public SetBadge(itemValue, badgeValue) {
            for (const item of this.vue.tabs) {
                const tabItem = <tabItem>item;

                // eslint-disable-next-line
                if (tabItem.value == itemValue) {
                    item.badge = badgeValue?.toString();
                }
            }
        }

        public HideItems(value: any) {
            const itemArray: string[] = value?.split(',')?.map((item) => item.toString());

            if (!itemArray?.length) {
                return;
            }

            this.vue.tabs = this.vue.tabs.filter(tab => !itemArray.includes(tab.value?.toString()));
        }
    }
}

Forguncy.Plugin.CellTypeHelper.registerCellType("Vant.CellTypes.Tabs, Vant", VantCellTypes.TabsCellType);